
<html>
  <head>
  <meta charset="utf-8">
	<title>Tweet Tracker | Intel Learning Company</title>
    <link rel="shortcut icon" href="/~fieztr/favicon.ico" />
    <link href="/~fieztr/IntelLearningCompanyPoster1.pdf" />
    <link href="/~fieztr/IntelLearningCompanyPoster2.pdf" />
	<!--<link href="style.css" rel="stylesheet" type="text/css">-->
	<!--[if lt IE 9]>	
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<meta name="description" content="Twitter Map Analysis" />
	<meta name="keywords" content="intel,osu,oregon,state,univeristy" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link href="styles.css" rel="stylesheet" type="text/css">
	
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
   <script type="text/javascript" src="coordObj.js"></script>
    <script type="text/javascript" src="twitterscript.js"></script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyChRMVAvQo4JIiBdgUJuK609zary5BZAE8&sensor=true">
    </script>
    <script type="text/javascript">
        var map;
        function initialize() {
            var stylesArray = [
  {
      featureType: "administrative",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "poi",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "road",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "transit",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "water",
      stylers: [
      { visibility: "on" },
      { invert_lightness: true }
    ]
  }, {
      featureType: "landscape",
      stylers: [
      { invert_lightness: true }
    ]
  }, {
      featureType: "water",
      elementType: "labels",
      stylers: [
      { visibility: "off" }
    ]
  }, {
}
]

            var stylesArray = new google.maps.StyledMapType(stylesArray, { name: "dark" });

            var mapOptions = {
                center: new google.maps.LatLng(0, 0),
                zoom: 2,
                mapTypeControl: false,
                streetViewControl: false,
                disableDefaultUI:true,
                mapTypeControlOptions: {
                    mapTypeId: [google.maps.MapTypeId.ROADMAP, 'styles_Array']
                }
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

            map.mapTypes.set('styles_Array', stylesArray);
            map.setMapTypeId('styles_Array');

            

        }

        var numOnScreen = 50;  //number of icons on a screen at a given moment
        var markersArray = [];
        var counter = 0;
        var locations = []; 


        function createMarker() {
            //var myIcon = new google.maps.MarkerOptions;
            var image = "dot3.png";
            var purpleMarker = new google.maps.Marker({
                position: locations[counter],
                map: map,
                icon: image,
                animation: google.maps.Animation.DROP

            });
            markersArray.push(purpleMarker);
            counter++;
        }

        function createLoc(lat, lng) {
            var loc = new google.maps.LatLng(lat, lng);
            location.push(loc);
        }

        function dropMarkers() {
            try {
                
                for (var i = 0; i < 100; i++) {
                    

                    if(Bob.geo[i].getLat() != 0){
                        var loc = new google.maps.LatLng(Bob.geo[i].getLat(), Bob.geo[i].getLon());
                        locations.push(loc);
                    }
                }
            }
            catch (e) {
                alert(e.message);
            }
        }

        function setup(data){
            Bob = new tweetSearcher();

            Bob.setTerm(data);

            Bob.search();
        }

        function placeMarkers() {
            document.getElementById("loading").style.display = "none";
            dropMarkers();
            delayInterval = (1200 / locations.length);
            for (i = 0; i < locations.length; i++) {
                setTimeout(function () {
                    createMarker();
                    }, i * delayInterval);
            }

        }

        function clearArrays() {
            counter = 0;
            for (var i = 0; i < markersArray.length; i++) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
            locations.length = 0;
        }


        function start(data) {
            try {
                
                clearArrays();
                document.getElementById("loading").style.display = "block";
                setup(data);
                
                setTimeout("placeMarkers()", 7000);
                //placeMarkers();
            }
            catch (e) {
                alert(e.Message);
            }
       }
        
       
            
    </script>
  </head>
  
<body id="main" onload="initialize()">
<div id="loading"  style="width: 100%; height: 100%; background-color: rgba(128, 128, 128, .3); display: none; position: absolute; z-index: 100;">
<img src="loader.gif" style="position: absolute; z-index: 101; top: 45%; left: 45%; width: 128px;"></img>
</div>

<div id="bar" style="width: 90%; margin: auto; height: 60px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));">
    <table style="width: 100%">
    <tr>
    <td valign="middle" style="width: 50%;">
        <div id="logo" align="left">
            <img src="logo.png" style="height: 50px;"/>
        </div>
        
        </td>
        <td style="width: 50%;" align="right" >
       <!-- style="margin-right: 75px; margin-top: 13px; padding-left: 205px;" ="search_bar"  action="" method="GET">-->
            <input type="hidden" name="dff_view" value="grid">
            <input type="text" onkeydown="if (event.keyCode == 13) start(document.getElementsByName('submit')[0].value)" autocomplete="on" name="submit" size="30" maxlength="70" placeholder="What tweet would you like to find?" style="background-color:#D0E7FF; -webkit-border-radius: 2px; -webkit-box-sizing: border-box; height: 35px; font: 16px calibri; border: solid 1px #D9D9D9; display: inline-block;" 
		        onfocus="if(this.value == 'Enter keyword to find where people have tweeted...'){this.value = '';this.style.color='#000'}" />
            <input type="button"  id="search" name="button" value="Track It!" onClick="start(document.getElementsByName('submit')[0].value)" />
        
        </td>
        </tr>
        </table>
</div>


<div id="map_canvas" style="width: 90%; height: 80%; margin: 50px auto; border: 5px solid #A1A1A1; -webkit-border-radius: 10px;">

</div>


</body>

  
</html>